<template>
  <div>
    <!--  提示-->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>您正在做的业务是:</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户修改</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--根据条件查询-->
    <div>
      <!-- 条件查询 -->
      <b>根据姓名查询:</b>
      <el-input v-model="name" style="width: 150px;"/>
      <el-button type="primary" @click="init">查询</el-button>
    </div>

    <!--  表格-->
    <div>
      <el-table
          :data="userData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="loginId"
            label="姓名"
            width="120">
        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱"
            width="250">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="电话"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
            width="300">
        </el-table-column>
        <el-table-column
            prop="gender"
            label="性别"
            width="120">
          <template slot-scope="scope">
            <p v-if="userData[scope.$index].gender==0">男</p>
            <p v-else-if="userData[scope.$index].gender==1">女</p>
            <p v-else>不男不女</p>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="medium ">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--  分页-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(pageNum)"
          :page-sizes="[2, 4, 8, 16]"
          :page-size="Number(pageSize)"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import request from "../../request.js"

export default {
  name: "UserDelete",
  data(){
    return{
      name: '',
      pageNum: '',
      pageSize: '',
      total: '',
      userData: [],
    }
  },methods: {
    //当前数量改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.init();
    },
    //页码改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.init();
    },
    init() {
      axios.get("http://localhost:8150/api/ucenter/wx/userQuery", {
        params: {
          'name': this.name,
          'pageNum': this.pageNum,
          'pageSize': this.pageSize
        }
      }).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        this.userData = data.data.data.records;
        this.pageNum = data.data.data.current;
        this.pageSize = data.data.data.size;
        this.total = data.data.data.total;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    },
    handleClick(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete("http://localhost:8150/api/ucenter/wx/"+row.id).then(data =>{

          if (data.data.flag==false) {
            this.$message({
              showClose: true,
              message: data.data.message,
              type: data.data.flag == true ? "success" : "error"
            })
            return;
          }

          if (data.data.flag){
            this.init();
          }
          this.$message({
            showClose:true,
            message:data.data.message,
            type:data.data.flag==true?"success":"error"
          });
        }).catch(e =>{
          alert("错误信息为:"+e)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    }
  },created() {
    this.init();
  }
}
</script>

<style scoped>

</style>